// Smooth scrolling (back-to-top etc.)
@media (prefers-reduced-motion: no-preference) {
  // This smooth scrolling behavior does not work in tandem with scrollIntoView
  // for some browser-os combinations. Therefore, if JavaScript is enabled, this
  // style is removed and the behavior is added to the back-to-top element etc.
  html {
    scroll-behavior: smooth;
  }
}

// Scroll-padding allows for anchors to not hug the top of the page. This aids
// with the visual indicator on guides pages, and works on all pages for a bit
// of breathing room.
html {
  scroll-padding-top: 20px;
}

body.guide {
  &::-webkit-scrollbar {
    width: 12px;
    background-color: $gray-100;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }

  -webkit-tap-highlight-color: rgba(38, 27, 35, 0);


  // ----------------------------------------------------------------------------
  // Typographic Baseline
  // ----------------------------------------------------------------------------

  :root {
    font-family: Inter, sans-serif;
    font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
  }
  @supports (font-variation-settings: normal) {
    :root {
      font-family: InterVariable, sans-serif;
    }
  }

  font-family: Inter, sans-serif;
  font-size: 1rem; /* 16px */
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;

  font-feature-settings: "liga" 1;
  @supports (font-variant-ligatures: common-ligatures) {
    font-feature-settings: normal;
    font-variant-ligatures: common-ligatures;
  }

  font-feature-settings: "onum" 1;
  @supports (font-variant-numeric: oldstyle-nums) {
    font-feature-settings: normal;
    font-variant-numeric: oldstyle-nums;
  }

  p {
    // Set hyphenation rules
    hyphenate-limit-lines: 2; /* Safari */
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
    hyphenate-limit-chars: 6 3 2; /* Not Safari */
    hyphenate-limit-last: always;

    margin: 0 0 0.75em 0; // Space after paragraph
    text-align: left;
  } // p

  // Links

  a {
    &:link {
      color: $rf-brand;
      text-decoration: underline;
    }

    &:hover,
    &:active {
      color: $rf-brand-light;
    }

    &:visited {
      color: $rf-brand-darker;
    }
  }

  a.skip-link {
    background-color: $gray-100;

    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;

    left: .5rem;
    top: .5rem;

    &:focus {
      position: absolute;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;

      padding: .5rem;
      border-radius: .125rem;
      z-index: 1;
    }
  }

  abbr {
    hyphens: manual;
  }

  abbr.smallcaps {
    font-feature-settings: "smcp" 1, "c2sc" 1;
    @supports (font-variant-caps: all-small-caps) {
      font-feature-settings: normal;
      font-variant-caps: all-small-caps;
    }
  }

  // Tables
  table {
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
    margin: 2em auto;
    width: 100%;

    caption {
      caption-side: bottom;
    }

    th {
      background-color: $gray-700;
      color: #fff;
      font-size: 0.875em;
      padding: 0.5em;
      text-align: left;
    }

    tr {
      &:nth-child(even) {
        background-color: $gray-100;
      }
    }

    td {
      padding: 0.5em;
    }
  }

  .table-wrapper {
    overflow: auto;
    margin-bottom: 2em;

    & > table {
      margin-bottom: 0;
    }
  }

  // Headlines
  // TODO: media queries to increase font size, current sizes are for desktop, so drop base to mobile appropriate and MQ up twice (min width 60/120 em, minheight 30/60em)
  h1 {
    color: $rf-brand;
    font-family: "Calibre", sans-serif;
    font-size: 3rem; /* 48px */
    font-weight: 700; /* Light */
    line-height: 1em;
    margin-top: 0;

    @include media("<desktop") {
      margin-top: 0.5em;
    }
  } // h1

  h2 {
    font-family: "Calibre", sans-serif;
    font-size: 2.25rem; // Calibre is smaller than inter at the same size
    font-weight: 700; /* Bold */

    a,
    a:link,
    a:visited {
      color: $rf-brand;
    } // a, a:link, a:visited

    code {
      font-size: 2rem;
      font-weight: 400;
    }
  } // h2

  h3, h2.chapter {
    font-size: 1.5rem; /* 24px */
    font-weight: 600; /* Semibold */

    a,
    a:link,
    a:visited {
      color: $gray-900;
    } // a, a:link, a:visited

    code {
      font-size: 1.5rem;
      font-weight: 400;
    }
  } // h3

  h4 {
    font-size: 1.125rem;

    code {
      font-size: 1.125rem;
      font-weight: 400;
    }
  }

  h5 {
    font-size: 0.9375rem;

    code {
      font-size: 0.9375rem;
      font-weight: 400;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    a,
    a:link {
      text-decoration: none;
    } // a, a:link

    a:hover,
    a:active {
      text-decoration: underline;
    } // a:hover, a:active

    span {
      font-weight: 400;
    }
  } // h1, h2, h3, h4

  // Old style numbers look weird in headlines and ordered lists, so use proportional lining numbers
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ol,
  ol > li {
    font-feature-settings: "kern" 1;
    @supports (kerning: normal) {
      font-feature-settings: normal;
      kerning: normal;
    }
    font-feature-settings: "lnum" 1;
    @supports (font-variant-numeric: lining-nums) {
      font-feature-settings: normal;
      font-variant-numeric: lining-nums;
    }
  }

  // Horizontal Rule
  hr {
    height: 1em;
    border: 0;
    background: url("../images/hr_rails_mobile.svg") center no-repeat;
    background-size: contain;
    margin: 1em auto;
    width: 90%;

    @include media(">tablet") {
      height: 1.5em;
      background: url("../images/hr_rails.svg") center no-repeat;
    }

    @include media(">desktop-ultra-wide") {
      height: 2em;
    }

    &.hide {
      height: 0 !important;
    }
  }

  // Definition Lists

  dl {
    margin: 0;

    dt {
      font-weight: bold;
      font-size: 1.125rem;
      padding: 0.125em 0 0.25em 0;
      margin-bottom: 0.75em;

      @include media("<phone-wide") {
        font-size: 1rem;
      } // @include media('<phone-wide')
    } // dt

    dd {
      padding: 0.25em 0 1em;
      border-bottom: 1px solid $gray-500;
      margin: 0 0 1em 0;

      .guides-indes-list &:last-child {
        border-bottom: none;
      }
    } // dd
  } // dl

  li {
    margin-bottom: 0.5em;
  }

  // Code

  pre,
  code {
    font-size: 1rem;
    font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace !important;
    line-height: 1.5;
    margin: 1em 0;
    overflow: auto;
  } // pre, code

  p code,
  ul code {
    background: $gray-200;
    border-radius: calc($base-border-radius / 2);
    padding: 1px 3px;
  }

  p img {
    max-width: 100%;
  }

  pre,
  tt,
  code {
    // https://caniuse.com/mdn-css_properties_white-space_pre-wrap
    white-space: pre-wrap; /* css-3 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
  }

  // Ensures that 'code' inside 'pre' preserves formatting and does not wrap, makes it horizontally scrollable instead
  pre {
    code {
      white-space: pre;
    }
  }

  // Back to Top element

  a.back-to-top {
    background: url("../images/up_white_arrow.png") no-repeat center center,
      $rf-brand;
    background-size: 1em;
    border-radius: calc($base-border-radius * 2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    padding: 1.5em;
    position: fixed;
    right: 1em;
    bottom: 1em;
    visibility: hidden;
  }

  &.no-js a.back-to-top,
  a.back-to-top.show {
    visibility: visible;
  }

  @supports (animation-timeline: scroll()) {
    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    a.back-to-top {
      visibility: visible;

      animation: fade-in auto linear both;
      animation-timeline: scroll();
      animation-range: 100px 300px;
    }
  }

  // Screen reader utilities
  .visibly-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .not-visibly-hidden {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  // Progressive enhancement
  &.no-js .js-only,
  &:not(.no-js) .js-hidden {
    display: none !important;
  }

  // ----------------------------------------------------------------------------
  // Layout
  // ----------------------------------------------------------------------------

  .wrapper {
    padding: 1em;
    text-align: left;

    @include media(">desktop") {
      // 1024
      max-width: calc(55rem + 420px);
      margin: 0 auto;
      padding-right: 470px;

      :where(html[dir="rtl"]) & {
        padding-right: 1.5em;
        padding-left: 470px;
      }
    }
  } // .wrapper

  main .wrapper {
    padding-top: 0;

    h2:first-child {
      margin-top: 0;
    }
  }

  select {
    border-radius: $base-border-radius;
    padding: 0.25em;
  }

  // mobile-navigation-bar is a hidden area for mobile only
  #mobile-navigation-bar {
    background-color: $gray-200;
    color: $gray-600;
    padding: 0.5em 0;
    font-size: 0.875rem;

    @include media(">desktop") {
      display: none;
    }

    .wrapper {
      text-align: center;
    }

    .hidden {
      display: none;
    }

    .red-button {
      background: $rf-brand;
      border: 0;
      border-bottom: 2px solid $rf-brand-dark;
      border-radius: $base-border-radius;
      color: white;
      padding: 0.5em 1em;

      &:active {
        background: $rf-brand-dark;
      }
    }

    .more-info-label {
      @include media("<desktop") {
        display: none;
      }
    }

    .more-info-button {
      cursor: pointer;
    }

    .more-info-links {
      @extend %list-in-disguise;
      background: $gray-200;
      border-radius: $base-border-radius;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
      font-size: 1.25em;
      position: absolute;
      left: 10vw;
      width: 80vw;

      li {
        border-bottom: 1px solid $gray-300;
        padding: 0.5em;

        &:last-child {
          border-bottom: none;
        }

        a,
        a:link,
        a:visited {
          font-weight: bold;
          text-decoration: none;
        }
      }
    }
  } // #mobile-navigation-bar

  header#page-header {
    width: 100%;

    .wrapper {
      max-width: calc(57em + 400px);
      padding-right: 0;
    }

    nav#feature-nav {
      @include media(">desktop") {
        align-items: top;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
      }

      // Image augmented
      .header-logo {
        text-align: center;

        a {
          background-image: url("../images/logo_rails-circle.svg");
          background-repeat: no-repeat;
          background-position: top center;
          display: inline-block;
          font-family: "Calibre", sans-serif;
          font-size: 2.25rem;
          font-weight: 700;
          margin: 0 auto;
          padding-top: 75px;
          text-align: center;
          text-decoration: none;
          font-weight: 700;

          @include media(">desktop") {
            padding: 10px 0 0 85px;
            background-position: top left;
            height: 85px;
            vertical-align: middle;
          }
        } // a

        span#version-switcher {
          color: $gray-600;
          display: block;
          font-size: 0.75em;

          @include media(">desktop") {
            display: inline-block;
            margin-left: 0.5em;
            vertical-align: 1px;
          }

          select {
            color: $gray-600;
          }
        } // span#version-switcher
      } // .header-logo

      ul.nav {
        @extend %list-in-disguise;
        margin: 1em 1em 0 1em;

        @include media(">desktop") {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          margin: 0;
          padding: 1em 0 0 0;
        }

        li {
          background: $gray-200;
          border-bottom: 1px solid $gray-300;
          font-size: 1.25em;
          text-align: center;
          padding: 1em;

          @include media(">desktop") {
            background: none;
            border: none;
            font-size: 0.75rem;
            height: 24px;
            padding-top: 5px;

            &:first-child {
              padding-top: 0;
            }

            a,
            a:link,
            a:visited {
              color: $gray-900;
              font-weight: bold;
              text-decoration: none;
            }
          }

          &:first-child {
            border-top-left-radius: $base-border-radius;
            border-top-right-radius: $base-border-radius;
          }
          &:nth-last-child(2) {
            border-bottom: none;
            border-bottom-left-radius: $base-border-radius;
            border-bottom-right-radius: $base-border-radius;
          }
          &:last-child {
            // the drop down
            background: none;
            border: none;
            padding: 1em 0 0 0;

            select {
              max-width: 100%;
            }
          }

          a#home_nav {
            @include media(">desktop") {
              // Image replacement
              background-color: transparent;
              color: transparent;
              border: 0;
              overflow: hidden;
              text-indent: 100%;
              text-shadow: none;
              white-space: nowrap;

              &:before {
                content: "";
                display: block;
                height: 100%;
                width: 0;
              }

              // all the rest
              background-image: url("../images/icon_house-chimney.svg");
              background-repeat: no-repeat;
              background-position: top center;
              display: inline-block;
              height: 24px;
              width: 24px;
            }
          }

          &.guides-index-large {
            @include media("<desktop") {
              display: none;
            }
          }

          &.guides-index-small {
            label {
              display: block;
              margin-bottom: 4px;
              font-size: 16px;
            }

            @include media(">desktop") {
              display: none;
            }
            @include media("<desktop") {
              display: block;
            }
          }
        }
      }
    } // nav#feature-nav
  } // header#page-header

  // Desktop guides flyout

  .guides-index .guides-index-item {
    position: relative;
    z-index: 15;
    padding-bottom: 0.125em;
    :where(html[dir="ltr"]) & { background-position: right top; padding-right: 1em; }
    :where(html[dir="rtl"]) & { background-position: left top; padding-left: 1em; }
  }

  #guides {
    background: $gray-200;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    display: block;
    border-radius: $base-border-radius;
    color: $gray-900;
    padding: 2em 2em 1.5em 2em;
    position: absolute;
    top: 25px;
    right: 50px;
    width: 90vw;
    max-width: 1000px;
    z-index: 10;
    :where(html[dir="ltr"]) & { left: auto; right: 50px; }
    :where(html[dir="rtl"]) & { left: 50px; right: auto; }

    &.visible {
      display: block !important;
    }

    .guides-section-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: 60em;
      width: 100%;

      .guides-section {
        flex: auto;
        margin: 0 2em 0.5em 0;
        text-align: left;
        width: 33%;

        dt,
        dd {
          font-weight: 400 !important;
          font-size: 0.825rem;
          margin: 0;
          padding: 0;
          font-variant-numeric: lining-nums tabular-nums;
        }

        dt {
          margin: 0.5em 0;
          font-weight: bold !important;
        }

        dd {
          line-height: 1.2;
          margin-bottom: 0.5em;
          border-bottom: none;

          a,
          a:link,
          a:visited {
            color: $gray-900;
            text-decoration: none;
            font-weight: 400 !important;
          }

          a:hover,
          a:active {
            color: $rf-brand !important;
            text-decoration: underline !important;
          }
        }
      }
    }
  } // #guides

  footer#complementary {
    background-color: $gray-800;
    color: #fff;
    font-size: 0.75em;
    padding: 1.5em 1.5em .5em 1.5em;
    width: 100%;

    .wrapper {
      padding: 0;

      @include media('>desktop') {
        padding: 0 1.5em;
      }
    }

    p {
      max-width: 100vw;
    }
  }

  #feature {
    background-color: $gray-100;

    @include media(">desktop") {
      background-color: #fff;
    }

    hr {
      margin-top: 2.5em;
    }

    #column-side {
      background-color: $gray-100;
      border-radius: $base-border-radius;
      font-size: 1rem;
      padding: 0.5em 1em;

      @include media(">desktop") {
        display: block;
        position: fixed;
          top: 100px;
          right: 50px;
        max-height: calc(100vh - 200px);
        width: 400px;

        :where(html[dir="rtl"]) & {
          right: auto;
          left: 50px;
        }
      }

      &.guide-index {
        background-color: transparent !important;
      }

      @include media('>desktop-ultra-wide') {
        right: calc(30vw - 400px);

        :where(html[dir="rtl"]) & {
          right: auto;
          left: calc(30vw - 400px);
        }
      }

      @include media('>desktop-hd') { // 1920
        right: calc(40vw - 400px);

        :where(html[dir="rtl"]) & {
          right: auto;
          left: calc(40vw - 400px);
        }
      }

      h3.chapter img {
        margin-right: 0.25em;
      }

      ol.chapters {
        padding-inline-start: 3.5em;
        padding-inline-end: 1em;

        &::-webkit-scrollbar
        {
          width: 6px;
          background-color: #f5f5f5;
        }

        &::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          border-radius: 6px;
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.44, $rf-brand-light),
            color-stop(0.72, $rf-brand),
            color-stop(0.86, $rf-brand-dark)
          );
        }

        @include media(">desktop") {
          overflow-y: auto;
          overflow-x: hidden;
          max-height: calc(100vh - 350px);
        }

        li {
          font-weight: bold;

          a {
            position: relative;
            display: block;
            word-wrap: break-word;
          }

          a,
          a:link,
          a:visited {
            color: $gray-900;
            text-decoration: none;
          }

          a:hover,
          a:active {
            color: $rf-brand;
            text-decoration: underline;
          } // a

          ul {
            margin-top: 0.5em;
            margin-bottom: 0.75em;
            padding-inline-start: 1em;
            padding-inline-end: 0.25em;

            li {
              font-weight: 400;

              a[href]:not([href=""]) {
                &::after { // highlight
                  @include media('>desktop') {
                    width: 328px;
                  }
                  left: -3em;

                  :where(html[dir="rtl"]) & {
                    right: -3em;
                    left: unset;
                  }
                }

                &::before { // red square
                  left: -2.5em;
                  top: 7px;

                  :where(html[dir="rtl"]) & {
                    right: -2.5em;
                    left: unset;
                  }
                }
              }
            } // li
          } // ul

          a[href]:not([href=""]) {
            &::before { // red square
              @include media('>desktop') {
                content: '';
                display: block;
              }
              position: absolute;
              height: 10px;
              width: 10px;
              top: 6px;
              left: -3em;
              border-radius: 3px;
              background-color: $rf-brand;
              opacity: 0;
              transition: opacity 0.2s ease-in-out;

              :where(html[dir="rtl"]) & {
                right: -3em;
                left: unset;
              }
            }

            &::after { // highlight
              content: '';
              position: absolute;
              display: block;
              height: calc(100% + 10px);
              @include media('>desktop') {
                width: 352px;
              }
              top: 50%;
              transform: translateY(-50%);
              left: -3.5em;
              border-radius: 8px;
              background-color: $stop-bkgnd;
              opacity: 0;
              transition: opacity 0.2s ease-in-out;

              :where(html[dir="rtl"]) & {
                right: -3.5em;
                left: unset;
              }
            }

            &[aria-current]::before,
            &[aria-current]::after {
              opacity: 1;
            }
          }
        } // li

        > li:first-child {
          margin-top: 0.5em;
        }
      } // ol
    }
  }
} // body.guide

html[dir="rtl"] {
  body.guide {
    direction: rtl;

    p, table th, .wrapper,
    #guides .guides-section-container .guides-section {
      text-align: right;
    }
  } // body.guide

  &:lang(ar), &:lang(fa) {
    body.guide {
      h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li,
      header#page_header nav#feature_nav .header-logo a {
        font-family: "Noto Sans Arabic", sans-serif !important;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100;
      }
    } // body.guide
  } // &:lang(ar), &:lang(fa)

  &:lang(he), &:lang(iw) {
    body.guide {
      h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li,
      header#page_header nav#feature_nav .header-logo a {
        font-family: "Heebo", sans-serif !important;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
      }
    } // body.guide
  } // &:lang(he), &:lang(iw)
} // html[dir="rtl"]
